<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  var chart_d1970e79d99441e7ac0e21084f258a56 = echarts.init(
      document.getElementById('d1970e79d99441e7ac0e21084f258a56'), 'white', {renderer: 'canvas'});
  var option_d1970e79d99441e7ac0e21084f258a56 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
      "enabled": false
    },
    "color": [
      "purple",
      "#5470c6",
      "#91cc75",
      "#fac858",
      "#ee6666",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#ea7ccc"
    ],
    "series": [
      {
        "type": "line",
        "name": "\u666e\u901a\u4e8c\u6bb5\u7ebf",
        "connectNulls": false,
        "xAxisIndex": 0,
        "symbol": "diamond",
        "symbolSize": 15,
        "showSymbol": true,
        "smooth": false,
        "clip": true,
        "step": false,
        "data": [
          [
            "2020\u5e74",
            "83.57"
          ],
          [
            "2021\u5e74",
            "86.42"
          ],
          [
            "2022\u5e74",
            "90.53"
          ],
          [
            "2023\u5e74",
            "91.97"
          ],
          [
            "2024\u5e74",
            "92.24"
          ]
        ],
        "hoverAnimation": true,
        "label": {
          "show": true,
          "margin": 8
        },
        "logBase": 10,
        "seriesLayoutBy": "column",
        "lineStyle": {
          "show": true,
          "width": 1,
          "opacity": 1,
          "curveness": 0,
          "type": "solid"
        },
        "areaStyle": {
          "opacity": 0
        },
        "zlevel": 0,
        "z": 0
      },
      {
        "type": "line",
        "name": "\u666e\u901a\u4e00\u6bb5\u7ebf",
        "connectNulls": false,
        "xAxisIndex": 0,
        "symbol": "triangle",
        "symbolSize": 15,
        "showSymbol": true,
        "smooth": false,
        "clip": true,
        "step": false,
        "data": [
          [
            "2020\u5e74",
            "43.42"
          ],
          [
            "2021\u5e74",
            "43.95"
          ],
          [
            "2022\u5e74",
            "45.91"
          ],
          [
            "2023\u5e74",
            "42.88"
          ],
          [
            "2024\u5e74",
            "44.17"
          ]
        ],
        "hoverAnimation": true,
        "label": {
          "show": true,
          "margin": 8
        },
        "logBase": 10,
        "seriesLayoutBy": "column",
        "lineStyle": {
          "show": true,
          "width": 1,
          "opacity": 1,
          "curveness": 0,
          "type": "solid"
        },
        "areaStyle": {
          "opacity": 0
        },
        "zlevel": 0,
        "z": 0
      },
      {
        "type": "line",
        "name": "\u7279\u6b8a\u7c7b\u578b\u62db\u751f\u7ebf",
        "connectNulls": false,
        "xAxisIndex": 0,
        "symbol": "arrow",
        "symbolSize": 15,
        "showSymbol": true,
        "smooth": false,
        "clip": true,
        "step": false,
        "data": [
          [
            "2020\u5e74",
            "17.64"
          ],
          [
            "2021\u5e74",
            "18.04"
          ],
          [
            "2022\u5e74",
            "18.71"
          ],
          [
            "2023\u5e74",
            "17.49"
          ],
          [
            "2024\u5e74",
            "18.18"
          ]
        ],
        "hoverAnimation": true,
        "label": {
          "show": true,
          "margin": 8
        },
        "logBase": 10,
        "seriesLayoutBy": "column",
        "lineStyle": {
          "show": true,
          "width": 1,
          "opacity": 1,
          "curveness": 0,
          "type": "solid"
        },
        "areaStyle": {
          "opacity": 0
        },
        "zlevel": 0,
        "z": 0
      }
    ],
    "legend": [
      {
        "data": [
          "\u666e\u901a\u4e8c\u6bb5\u7ebf",
          "\u666e\u901a\u4e00\u6bb5\u7ebf",
          "\u7279\u6b8a\u7c7b\u578b\u62db\u751f\u7ebf"
        ],
        "selected": {},
        "show": true,
        "top":"80%",
        "padding": 5,
        "itemGap": 10,
        "itemWidth": 25,
        "itemHeight": 14,
        "textStyle": {
          "fontSize": 12
        },
        "backgroundColor": "transparent",
        "borderColor": "#ccc",
        "borderRadius": 0,
        "pageButtonItemGap": 5,
        "pageButtonPosition": "end",
        "pageFormatter": "{current}/{total}",
        "pageIconColor": "#2f4554",
        "pageIconInactiveColor": "#aaa",
        "pageIconSize": 15,
        "animationDurationUpdate": 800,
        "selector": false,
        "selectorPosition": "auto",
        "selectorItemGap": 7,
        "selectorButtonGap": 10
      }
    ],
    "tooltip": {
      "show": true,
      "trigger": "item",
      "triggerOn": "mousemove|click",
      "axisPointer": {
        "type": "line"
      },
      "showContent": true,
      "alwaysShowContent": false,
      "showDelay": 0,
      "hideDelay": 100,
      "enterable": false,
      "confine": false,
      "appendToBody": false,
      "transitionDuration": 0.4,
      "textStyle": {
        "fontSize": 14
      },
      "borderWidth": 0,
      "padding": 5,
      "order": "seriesAsc"
    },
    "xAxis": [
      {
        "show": true,
        "scale": false,
        "nameLocation": "center",
        "nameGap": 30,
        "nameTextStyle": {
          "fontSize": 20
        },
        "gridIndex": 0,
        "inverse": false,
        "offset": 0,
        "splitNumber": 5,
        "minInterval": 0,
        "splitLine": {
          "show": true,
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          }
        },
        "data": [
          "2020\u5e74",
          "2021\u5e74",
          "2022\u5e74",
          "2023\u5e74",
          "2024\u5e74"
        ]
      }
    ],
    "yAxis": [
      {
        "show": true,
        "scale": false,
        "nameLocation": "center",
        "nameGap": 30,
        "nameTextStyle": {
          "fontSize": 10
        },
        "gridIndex": 0,
        "inverse": false,
        "offset": 0,
        "splitNumber": 5,
        "minInterval": 0,
        "splitLine": {
          "show": true,
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          }
        }
      }
    ],
    "title": [
      {
        "show": true,
        "text": "2020-2024上线率变化折线图",
        "target": "blank",
        "subtarget": "blank",
        "left": "15%",
        "padding": 5,
        "itemGap": 10,
        "textAlign": "auto",
        "textVerticalAlign": "auto",
        "triggerEvent": false,
        "textStyle": {
          "fontSize": 15
        }
      }
    ]
  };
  chart_d1970e79d99441e7ac0e21084f258a56.setOption(option_d1970e79d99441e7ac0e21084f258a56);
})

</script>

<template>
<div id="d1970e79d99441e7ac0e21084f258a56"></div>
</template>

<style scoped>
#d1970e79d99441e7ac0e21084f258a56{
  width: 100%;
  height: 100%;
}
</style>